import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router-dom'
import { Card, WhiteSpace } from 'antd-mobile'
import './index.css'

class Usercard extends React.Component{
  static propTypes = {
    userlist: PropTypes.array.isRequired
  }
  handleClick = (v) => {
    this.props.history.push(`/chat/${v._id}`)
  }
  render() {
    return <div className="boss-container">
      { 
        this.props.userlist.map( v => 
          v.avatar ? 
            <div key={v._id} style={{ backgroundColor: '#eee' }}>
              <WhiteSpace size="md"/>
              <Card  
                style={{backgroundColor: '#fff'}}
                onClick={() => this.handleClick(v)}
              >  
                <Card.Header 
                  title={<div className="title">{ v.user }</div>}
                  thumb={<img src={`http://192.168.31.124:8009/${v.avatar}`} className="avatar" alt=""/>}
                  extra={<div style={{fontSize: '14px'}}>{v.title}</div>}
                />
                <Card.Body>
                  <div style={{fontSize: '14px'}}>
                    { v.type === 'boss' ? <div style={{ margin: '6px 0', fontWeight: 'bold' }}>{ v.company }</div> : null }
                    { 
                      v.desc.split('\n').map((item, index) => {
                        return <div key={ index }>{ item }</div>
                      }) 
                    }
                    { v.type === 'boss' ? <div style={{ margin: '8px 0' }}>薪资：<span style={{fontWeight: 'bold'}}>￥{v.money}</span></div> : null }
                  </div>
                </Card.Body>
              </Card> 
            </div> 
            : null
        )}
    </div>
  }
}

export default withRouter(Usercard)